//2 cnpm i 安装全局模块到 当前目录
//1 npm install webpack webpack-cli -D
//  npx webpack --config webpack.config.js
//  cnpm install build --save-dev
//3 webpack 打包进dist
//  cnpm run dev

// 此时打包后的css文件是以行内样式style的标签写进打包后的html页面中，如果样式很多的话，我们更希望直接用link的方式引入进去，这时候需要把css拆分出来
// 拆分css样式的插件 将打包到js里的css文件进行一个拆分
//安装beta版本支持4.0 npm install -g --save-dev extract-text-webpack-plugin@next
const ExtracTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

//获得NODE_ENV参数，用于判断处于开发模式还是打包模式
const isDev = process.env.NODE_ENV === 'develement';

const config = module.exports = {
    entry: {
        //1个是单入口 ; 多个多入口; 每个页面 或者共用模块一个入口；webpack 命令检查是否打包成功各个模块
        //默认页面引用的JS，不需要手动引入; 需要在js里面引入所需要的css
        app:path.join(__dirname, './src/js/hello.js'),
        zys:path.join(__dirname, './src/js/zys.js')
    },
    output: {
        //单入口
        // filename: 'hello.js',
        // path: path.resolve(__dirname, 'dist')
        //多入口 加hash防止缓存 '[name].[hash:4].js',其实引用后面也有?xxx参数
        filename: 'js/[name].[hash].js',
        //path.resolve('dist')
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,    // 小于8k的图片自动转成base64格式，并且不会存在实体图片
                            outputPath: 'images/'   // 图片打包后存放的目录
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ExtracTextPlugin.extract({//拆分CSS
                    // 将css用link的方式引入就不再需要style-loader了,引入报错
                    use: ['css-loader', 'postcss-loader']
                    //,publicPath: '../'
                })
            },
            {
                test: /\.scss/,
                use: ExtracTextPlugin.extract({
                    use: [
                        //不注释掉会报错
                        // {
                        //     loader: 'style-loader'
                        // },
                        {
                            loader: 'css-loader?importLoaders=1'
                        },
                        //添加CSS3前缀
                        {
                            loader: 'postcss-loader'
                        }, {
                            loader: 'sass-loader'
                        }]
                })
            },
            // Babel会将ES6的代码转成ES5
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            //引用字体
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"develement"' : '"production"'
            }
        }),
        //编译SCSS文件
        new ExtracTextPlugin('css/[name]-[hash].css'),
        //会多生成2个sass转css的文件,和上面重复了
        // 拆分后会把css文件放到dist目录下的css/style.css
        /*new ExtracTextPlugin('css/style.css'),
        new ExtracTextPlugin({ //样式文件单独打包
            filename: "css/app.css",  //指定生成的文件名称
            disable: false,  //是否禁用此插件
            allChunks: true
        })*/

        //提取公共组件 并引用 这种是webpack 4.0以前的写法
        /*new webpack.optimize.CommonsChunkPlugin({
            name:'zys'
        })*/
        // 通过new一下这个类来使用插件 多页面就多个
        new HtmlWebpackPlugin({
            // 用哪个html作为模板
            // 在src目录下创建一个index.html页面当做模板来用
            template: './src/index.html',
            hash: true // 会在打包好的bundle.js后面加上hash串
        }),
        //可视化分析页面
        //new BundleAnalyzerPlugin()
        // 打包前先清空
        new CleanWebpackPlugin('dist'),
        // 热替换，热替换不是刷新(VUE、React就是这个原理)
        new webpack.HotModuleReplacementPlugin()
    ],
    //提取公共组件 并引用 这种是webpack 4.0之后的写法
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {   // 抽离第三方插件
                    test: /node_modules/,   // 指定是node_modules下的第三方包
                    chunks: 'initial',
                    name: 'vendor',  // 打包后的文件名，任意命名
                    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                    priority: 10
                },
                utils: { // 抽离自己写的公共代码，utils这个名字可以随意起
                    chunks: 'initial',
                    name: 'utils',  // 任意命名
                    minSize: 0    // 只要超出0字节就生成一个新包
                }
            }
        }
    },
    // 在webpack的配置中，resolve我们常用来配置别名和省略后缀名
    resolve: {
        // 别名
        alias: {
            $: './src/jquery.js'
        },
        // 省略后缀
        extensions: ['.js', '.json', '.css']
    }
}

if (isDev) {
    //webpack-dev-server不能使用chunkhash，否则会报错
    config.output.filename = '[name]-[hash].js';
    config.devtool = '#cheap-module-eval-source-map'
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(), //热更新插件
        new webpack.NoEmitOnErrorsPlugin() //防止错误信息导致webpack退出
    )

    //启动开发服务器
    config.devServer = {
        contentBase: path.join(__dirname, 'dist'),
        // host: 'localhost',  // 默认是localhost
        compress: true,
        port: 8080,
        hot: true, // 开启热更新
        open: true // 自动打开浏览器
    }
}

module.exports = config;